import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {},

  navbar: {
    // backgroundColor: "green",
    background: (theme) => theme.palette.grey[900],
    display: "flex",
    flexDirection: "column",
    height: "100vh",
    maxWidth: "12vw",
  },

  addPlace: {
    background: (theme) => theme.palette.grey[800],
    display: "flex",
    flexDirection: "row",
    textAlign: "center",
    padding: ".5em",
  },

  input: {
    fontSize: "0.8rem",
  },

  button: {
    marginLeft: "0.5em",
    // background: "#6611aa",
  },

  chatItem: {
    padding: ".3em .5em .3em .5em",
    margin: ".5em .7em .5em .7em",
    borderRadius: "5px",
    "&:hover": {
      background: (theme) => theme.palette.action.hover,
    },
    "&:active": {
      background: (theme) => theme.palette.action.selected,
    },
  },

  chatItemPicked: {
    padding: ".3em .5em .3em .5em",
    margin: ".5em .7em .5em .7em",
    background: (theme) => theme.palette.action.selected,
    borderRadius: "5px",
  },

  chatItemName: {
    color: (theme) => theme.palette.text.primary,
    fontSize: ".75em",
  },

  chatItemId: {
    color: (theme) => theme.palette.text.disabled,
    fontSize: ".6em",
  },

  profile: {
    background: (theme) => theme.palette.grey[800],
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    padding: ".5em",
    color: (theme) => theme.palette.text.primary,
  },

  profileName: {
    // background: "green",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    height: "100%",
    width: "100%",
    fontSize: ".9rem",
  },

  profileSettings: {
    // background: "green",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    height: "100%",
    padding: ".1rem",
    borderRadius: "10px",
    "&:hover": {
      background: (theme) => theme.palette.action.hover,
    },
    "&:active": {
      background: (theme) => theme.palette.action.selected,
    },
  },
}));

export { useStyles };
